<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>01-vue组件的注册</title>
	</head>
	<body>
		<!-- 在视图html中引入组件，组件名称是Vue.component的第一个参数（的小写形式） -->
		<div id="app">
			<button-com></button-com>
			<button-com></button-com>
			<button-com></button-com>
			<hr />
			<h3>私有组件</h3>
			<hello-tom></hello-tom>
			<hello-bob></hello-bob>
			<hello-tony></hello-tony>
		</div>
		<script type="text/javascript" src="./js/vue.js"></script>
		<script type="text/javascript">
			// 全局注册组件
			// Vue.component('ButtonCom', {
			// 	data: function () {
			// 		return { counter: 0 };
			// 	},
			// 	template:
			// 		'<button @click="handle">点击了<i>{{counter}}</i>次</button>',
			// 	methods: {
			// 		handle: function () {
			// 			this.counter += 1;
			// 		}
			// 	}
			// });

			/**
			 * @ 组件注册的注意事项
			 * 1.组件的模板必须是单个根元素
			 * 2.组件的模板可以使用模板字符串
			 * 3.组件的data参数，参数值必须是一个函数（匿名函数使得每个组件的数据都存储在不同的函数中，以避免各组件数据相互污染）
			 * 4.当以驼峰命名法，命名组件时，只能用在组件定义和模板字符串中,在普通标签中必须使用短横线连接的方式
			 *
			 *
			 *
			 */

			Vue.component('HelloWorld', {
				data: function () {
					return { msg: 'Hello World' };
				},
				template: '<div><span>{{msg}}</span></div>'
			});
			Vue.component('button-com', {
				// data参数值必须是函数
				data: function () {
					return { counter: 0 };
				},
				// 模板必须是单个根元素，即模板所在的代码顶级层盒子必须包裹所有子盒子
				// 模板中可以使用模板字符串
				template: `<div>
				     <span>按钮</span>
				     <button @click="handle">点击了<b>{{counter}}</b>次</button>
				       <HelloWorld></HelloWorld>
				     </div>`,
				methods: {
					handle: function () {
						this.counter += 1;
					}
				}
			});

			//  私有组件的定义
			const HelloTom = {
				data: function () {
					return { msg: 'HelloTom' };
				},
				template: '<div><b>{{msg}}</b></div>'
			};
			const HelloBob = {
				data: function () {
					return { msg: 'HelloBob' };
				},
				template: '<div><i>{{msg}}</i></div>'
			};
			const HelloTony = {
				data: function () {
					return { msg: 'HelloTony' };
				},
				template: '<div><s>{{msg}}</s></div>'
			};
			const vm = new Vue({
				// 控制区域
				el: '#app',
				data: {},
				components: {
					// 'hello-tom': HelloTom,
					// 'hello-bob': HelloBob,
					// 'hello-tony': HelloTony
					// 可以简写
					HelloTom,
					HelloBob,
					HelloTony
				}
			});
		</script>
	</body>
</html>
